/**
 * 应用根组件
 * 负责设置全局配置和提供应用上下文
 */
// 导入全局样式
import '@/assets/styles/index.scss';
// 导入路由组件
import { RouterProvider } from 'react-router-dom';
// 导入 react-router-dom 路由配置
import router from '@/routes';
// 导入 Ant Design 配置提供者
import { ConfigProvider } from 'antd';
// 导入状态管理提供者
import { Provider } from 'react-redux';
// 导入中文语言包
import zhCN from 'antd/locale/zh_CN';
// 导入 React Query 相关组件
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// 导入 react-redux-toolkit 配置
import { store } from '@/store';
// 创建 React Query 实例
const queryClient = new QueryClient({
  // 默认查询配置
  defaultOptions: {
    queries: {
      // 窗口获得焦点时不重新获取数据
      // 避免不必要的网络请求
      refetchOnWindowFocus: false,
      
      // 查询失败时的重试次数
      // 设置为 1 表示只重试一次
      retry: 1,
      
      // 数据过期时间（毫秒）
      // 超过此时间后数据会被标记为过期
      staleTime: 5 * 60 * 1000, // 5 分钟
    
      
      // 是否在挂载时获取数据
      // true: 组件挂载时自动获取
      // false: 需要手动触发
      enabled: true,
      
      // 是否在后台保持数据新鲜
      // true: 在后台定期重新获取
      // false: 只在显式请求时获取
      refetchOnMount: true,
      
      // 是否在重新连接时重新获取
      // true: 网络重新连接时重新获取
      // false: 不自动重新获取
      refetchOnReconnect: true,
    },
    mutations: {
      // 突变（数据修改）的默认配置
      // 重试次数
      retry: 1,
      
    }
  }
});

/**
 * 应用根组件
 * 提供全局配置和上下文
 */
function App() {
  return (
    // React Query 提供者，用于数据获取和缓存
    <QueryClientProvider client={queryClient}>
      {/* Ant Design 配置提供者，设置中文语言 */}
      <ConfigProvider locale={zhCN}>
        {/* 状态管理提供者 */}
        <Provider store={store}>
          {/* 路由提供者 */}
          <RouterProvider router={router}>
            {/* 应用路由 */}
            <App />
          </RouterProvider>
        </Provider>
      </ConfigProvider>
    </QueryClientProvider>
  );
}

export default App;
